<template>
  <div
    class="dashboard-container"
    v-loading="loading"
  >
    <div class="app-container">
      <el-card>
        <div>
          <el-tabs class="tabs">
            <el-tab-pane label="用户管理"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="tree-card">
          <TreeTools
            :tree-node="company"
            :isRoot="true"
            @addDepts="addDepts"
          ></TreeTools>
          <el-tree
            :data="departs"
            :props="defaultProps"
            default-expand-all
          >
            <TreeTools
              slot-scope="{ data }"
              :tree-node="data"
              @delDepts="getDepartments"
              @addDepts="addDepts"
              @editDepts="editDepts"
            ></TreeTools>
          </el-tree>
        </div>
      </el-card>
    </div>
    <AddDept
      :showDialog.sync="showDialog"
      :treeNode="node"
      @addDepts="getDepartments"
      ref="addDepts"
    />
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import TreeTools from './components/tree-tools.vue'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data () {
    return {
      company: {},
      departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
      { name: '行政部', manager: '刘备' },
      { name: '人事部', manager: '孙权' }],
      defaultProps: {
        label: 'name', // 表示 从这个属性显示内容
        children: 'children'
      },
      showDialog: false, // 显示窗体
      node: null,
      loading: false
    }
  },
  created () {
    this.getDepartments()
  },
  methods: {
    async getDepartments () {
      this.loading = true
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(result.depts, '')
      // console.log(result)
      this.loading = false
    },
    addDepts (node) {
      this.showDialog = true
      this.node = node
      // console.log(node, '=====')
    },
    editDepts (node) {
      this.showDialog = true
      this.node = node
      // console.log(this.$refs.addDepts)
      this.$refs.addDepts.getDepartDetail(node.id)
    }
  }
}
</script>

<style>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
.tabs {
  padding: 0 40px;
}
</style>
